<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <div style="margin-top: 60px"></div>
      <div class="article-title">
        <!--        <el-form-item label="文章封面" class="article-img">-->
        <!--          <el-upload-->
        <!--              action="#"-->
        <!--              accept="image/*"-->
        <!--              list-type="picture-card"-->
        <!--              :auto-upload="false"-->
        <!--              ref="imgupload"-->
        <!--              :limit="limit"-->
        <!--              :on-exceed="moreout"-->
        <!--              :on-change="handleChange"-->
        <!--              :multiple="true">-->
        <!--            <i slot="default" class="el-icon-plus"></i>-->
        <!--            <div slot="file" slot-scope="{file}">-->
        <!--              <img-->
        <!--                  class="el-upload-list__item-thumbnail"-->
        <!--                  :src="file.url" alt=""-->
        <!--              >-->
        <!--              <span class="el-upload-list__item-actions">-->
        <!--            <span-->
        <!--                class="el-upload-list__item-preview"-->
        <!--                @click="handlePictureCardPreview(file)"-->
        <!--            >-->
        <!--              <i class="el-icon-zoom-in"></i>-->
        <!--            </span>-->
        <!--            <span-->
        <!--                v-if="!disabled"-->
        <!--                class="el-upload-list__item-delete"-->
        <!--                @click="handleRemove(file)"-->
        <!--            >-->
        <!--              <i class="el-icon-delete"></i>-->
        <!--            </span>-->
        <!--            </span>-->
        <!--            </div>-->
        <!--          </el-upload>-->
        <!--        </el-form-item>-->
        <el-form-item label="文章标题" prop="title">
          <el-col :sm="13" :xs="24">
            <el-input v-model="form.articlename"></el-input>
          </el-col>
        </el-form-item>
      </div>
      <el-form-item label="文章介绍" prop="desc">
        <el-col :sm="13" :xs="24">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.tips"
              maxlength="80"
              show-word-limit
          >
          </el-input>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :sm="7" :xs="24">
          <el-form-item label="文章类别" prop="classty">
            <el-select v-model="form.firsttype" placeholder="请选择文章类别">
              <el-option label="个人日记" value="个人日记"></el-option>
              <el-option label="学习心得" value="学习心得"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编辑器类型" label-width="95px" prop="classty">
            <el-select v-model="form.sectype" placeholder="请选择文章类别">
              <el-option label="富文本" value="rich"></el-option>
              <el-option label="markdown" value="markdown"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="margin-top: 30px"></div>
      <mavon-editor
          v-if="form.sectype=='markdown'"
          style="height: 100vh"
          ref="md"
          :ishljs="true"
          v-model="form.article"
      />
      <editor v-if="form.sectype=='rich'" v-model="form.article" @ready="editorReady"></editor>
      <div style="margin-top: 60px"></div>
      <div style="display: flex; justify-content: center; margin-bottom: 10px">
        <el-button style="width: 50%" @click="onSubmit('form')">发布</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import {mavonEditor} from "mavon-editor";
import Channels from "./Channels";
import "mavon-editor/dist/css/index.css";
import editor from "../../admin/components/wangEditor";

export default {
  name: "ArticleUpdate",
  components: {
    mavonEditor,
    Channels,
    editor
  },
  data() {
    return {
      isClear: false,
      detail: "",
      show3: false,
      url: '',
      srcList: [],
      filearr: [],
      param: null,
      disabled: false,
      limit: 1,
      type: "add",
      imgType: "toutiao",
      checkboxGroup1: [],
      form: {
        articlename: "",
        article: "",
        tips: "",
        firsttype: "个人日记",
        sectype: "rich"
      },
      articleid: null
    };
  },
  methods: {
    editorReady(editor) {
      this.editor = editor;
      this.content = this.editor.txt.text()
    },
    handleChange(file, fileList) {
      const fileObj = file.raw;
      const windowURL = window.URL || window.webkitURL;
      if (file && fileObj) {
        this.filearr.push(fileObj)
      }
    },
    handleRemove(file) {
      this.param = null
      console.log(file);
      let fileList = this.$refs.imgupload.uploadFiles;
      let index = fileList.findIndex(fileItem => {
        return fileItem.uid === file.uid
      });
      fileList.splice(index, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    moreout() {
      this.$message.warning("最多上传一张照片！")
    },
    // async changw(articleid) {
    //   if (this.filearr.length == 0) {
    //     this.$message.error("请上传封面图片！！")
    //     return
    //   }
    //   this.param = new FormData()
    //   this.filearr.forEach((file, index) => {
    //     this.param.append(`file`, file) // 把单个文件重命名，存储起来（给后台）
    //   })
    //   return new Promise(resolve => {
    //     this.$http({
    //       method: "post",
    //       url: "/file/uploadFilesmore/" + articleid,
    //       headers: {
    //         'Content-Type': 'multipart/form-data',
    //       },
    //       data: this.param
    //     }).then(data => {
    //       resolve(data.data)
    //     })
    //   })
    // },
    onSubmit() {
      if (this.form.articlename == "" || this.form.article == "" || this.form.tips == "") {
        this.$message.error("请将所有空格填完！！")
        return
      }
      this.form.articleid = this.articleid
      this.$http.put("/article/updateArticle", this.form).then(async res => {
        if (res.code == 200) {
          await this.$message.success("成功")
          window.location.reload()
        } else {
          await this.$message.error("失败")
          window.location.reload()
        }
      })
    },
    getArticleByArticleid(articleid) {
      return new Promise(resolve => {
        this.$http.get("/article/getArticleById/" + articleid).then(res => {
          resolve(res.data)
        })
      })
    }
  },
  created() {
    let articleid = this.$route.params.id
    this.articleid = articleid
    this.getArticleByArticleid(articleid).then(res => {
      this.form = res
    })
  },
};
</script>
<style lang="stylus" scoped>
// .article-img >>>.el-upload--picture-card
// width:102px
// height:102px
// line-height:102px
@media (min-width: 1010px) {
  .article-title {
    position: relative;

    .article-img {
      position: absolute;
      top: 0;
      right: 150px;
    }

    .avatar {
      position: absolute;
      top: 0;
      left: 160px;
      height: 148px;
      max-width: 148px;
      border-radius: 5px;
      display: block;
    }
  }
}
</style>